<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设计我的T恤-ZoomYoung</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
    <link rel="stylesheet" type="text/css" href="http://file.zoomyoung.cn/web/css/all.css">
    <link rel="stylesheet" type="text/css" href="http://file.zoomyoung.cn/web/css/design.css">
    <link rel="stylesheet" type="text/css" href="http://file.zoomyoung.cn/web/css/jquery.mloading.css">
    <script type="text/javascript" src="http://file.zoomyoung.cn/web/js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="http://file.zoomyoung.cn/web/js/ajax/ajaxFeng.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
    <script type="text/javascript" src="http://file.zoomyoung.cn/web/js/jquery.mloading.js"></script>
</head>
<body>
   <div class="all">
         <div class="show">
            <div class="show_zhuan"><img src="http://file.zoomyoung.cn/web/img/zhuan.png"/></div>
            <a class="show_next" >下一步</a>
            <div class="zhuan">
                <img  class="rr" color_space="ffffff" face="0"/>
                <img class="show_cloth_content" style="display: none" />
            </div>
            <div class="showColor">
                  <img src="http://file.zoomyoung.cn/web/img/material/small/showBtn.png"/>
            </div>
            <div class="selectColor">
                <ul></ul>
            </div>
         </div>
         <div class="footer">
            <div class="footr_nav">
               <ul>
                  <li class="select">
                      <img src="http://file.zoomyoung.cn/web/img/Chinese.png" class="Chinese"/>
                      <img src="http://file.zoomyoung.cn/web/img/Chinese1.png" class="Chinese1"/>
                  </li>
                   <li>
                       <img src="http://file.zoomyoung.cn/web/img/picture.png" class="Picture"/>
                       <img src="http://file.zoomyoung.cn/web/img/picture1.png" class="Picture1"/>
                   </li>
                  <li>
                      <img src="http://file.zoomyoung.cn/web/img/English.png" class="English"/>
                      <img src="http://file.zoomyoung.cn/web/img/English1.png" class="English1"/>
                  </li>
               </ul>
            </div>
            <div class="footer_footer wiper-container">
              <div class="swiper-wrapper">
                 
              </div>
            </div>
         </div>
   </div>

<!--<script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script>-->
<!--jq代码-->
   <script>
       var _hmt = _hmt || [];
       (function() {
           var hm = document.createElement("script");
           hm.src = "https://hm.baidu.com/hm.js?2a04b9d7f4b4a0edfe491497d0cfa626";
           var s = document.getElementsByTagName("script")[0];
           s.parentNode.insertBefore(hm, s);
       })();
   </script>

   <script type="text/javascript">
$(function () {
//    var img= null;
//    window.onload = function() {
        /*初始化footer高度*/
        var footerWidth=$(document).width()/1.5  +"px";
        $('.footer').css('height',footerWidth);
        $('.selectColor').css('bottom',footerWidth);
        $('.showColor').css('bottom',footerWidth);

        $('.footr_nav .select').find('img').eq(1).show();
        $('.footr_nav .select').find('img').eq(0).hide();

        var img = index_footer("?type=zh");
//    }

    function Click(){
        if(window.event.srcElement.tagName=="IMG")
        {
            window.event.returnValue=false;
        }
    }
    document.oncontextmenu=Click;

    /*切换底部导航条*/
    $('.footr_nav ul li').click(function() {
        var index = $(this).index();
        if (index == "0") {
            type = "zh";
        }
        if (index == "2") {
            type = "en";
        }else if(index == "1"){
            type = "img";
        }
        $('.rr').attr('face')
        //fen(dataAjax("http://zoomyoung.cn/api/design/get-material","get","json",false,type));
        $(this).addClass('select').siblings().removeClass('select');
        $(this).find('img').eq(1).show();
        $(this).find('img').eq(0).hide();
        var len = $(this).siblings().length;
        for (var i = 0; i < len; i++) {
            $(this).siblings().eq(i).find('img').eq(1).hide();
            $(this).siblings().eq(i).find('img').eq(0).show();
        }
        index_footer("?type=" + type);
    });

    <!--中文功能-->
//    var img=index_footer("?type=zh");
    <!--滑动-->

    function index_footer(dataString){
        $('body').mLoading({
            text:"加载中...",
            icon:'./img/loading.gif',
            mask:true
        });
        $.ajax({
            url: "http://zoomyoung.cn/api/design/get-material"+dataString,
            type: 'get',
            dataType:"json",
            async:true,
            xhrFields:{
                withCredentials:true,
            },
            crossdomain:true,
            success: function (obj) {
               $('body').mLoading('hide');
                if(obj.level == "success"){
                    fen(obj);
                    getTemplateList();
                    sw();
                }else {
                    alert(obj.message);
                }
            },
            error:function(){
                $('body').mLoading('hide');
                console.log('styleSteam  error')
            }
        });
    }

    function sw() {
        var mySwiper = new Swiper ('.footer_footer', {
            direction: 'horizontal',
            //loop: true,
            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            },
            roundLengths: true,
            initialSlide:0
        
        });
    }

    <!--让图片分页-->
    function fen(img) {
        $('.footer_footer .swiper-wrapper').empty();
        $('.footer_footer').remove();
        $('.swiper-wrapper').remove();
        $('.footer').append('<div class="footer_footer wiper-container"><div class="swiper-wrapper"></div></div>')
        var hengNum = Math.ceil(img.data.heng.length / 6);
        if (img.data.heng.length > 1) {
            for (var i = 0; i < hengNum; i++) {
                $('.footer_footer .swiper-wrapper').append('<ul class="swiper-slide"></ul>');
                for (var j = 0; j < img.data.heng.length - 6 * i; j += 2) {
                    var HTMlElent = '<li><div>'+
                                     '<img src="' + img.data.heng[j + 6 * i].img_thumb_url + '" img_url="' + img.data.heng[j + 6 * i].img_url + '" img_id="' + img.data.heng[j + 6 * i].img_id + '"/>'+
                                     '</div>'+
                                     '<div>'+
                                     '<img src="' + img.data.heng[j + 6 * i + 1].img_thumb_url + '" img_url="' + img.data.heng[j + 6 * i + 1].img_url + '" img_id="'+
                                    img.data.heng[j + 6 * i + 1].img_id + '"/>'+
                                     '</div></li>';
                    $('.footer_footer .swiper-wrapper ul').eq(i).append(HTMlElent);
                }
            }
        }

        if (img.data.shu.length > 0) {
            var item = 0;
            var ulLen = $('.footer_footer .swiper-wrapper ul:last').children().length;
            if (ulLen != 3) {
                for (var i = 0; i < 3 - ulLen; i++) {
                    var HTMLElent = '<li class="shu"><img src="' + img.data.shu[i].img_thumb_url + '" img_url="' + img.data.shu[i].img_url + '" img_id="' + img.data.shu[i].img_id + '"/></li>';
                    $('.footer_footer .swiper-wrapper ul:last').append(HTMLElent);
                    item++;
                };

                var shuNum = Math.ceil((img.data.shu.length - (3 - ulLen)) / 3);
                for (var i = 0; i < shuNum; i++) {
                    $('.footer_footer .swiper-wrapper').append('<ul class="swiper-slide"></ul>');

                    var maxLen = 0;
                    for (item; item < img.data.shu.length; item++) {
                        if (maxLen < 3) {
                            var HTMLElent = '<li class="shu"><img src="' + img.data.shu[item].img_thumb_url + '" img_url="' + img.data.shu[item].img_url + '" img_id="' +
                                             img.data.shu[item].img_id + '"/>';
                            $('.footer_footer .swiper-wrapper ul').eq(hengNum + i).append(HTMLElent);
                            maxLen++;
                        } else {
                            break;
                        }
                    }
                }
            } else {
                var shuNum = Math.ceil(img.data.shu.length / 3);
                for (var i = 0; i < shuNum; i++) {
                    $('.footer_footer .swiper-wrapper').append('<ul class="swiper-slide"></ul>');
                    var maxLen = 0;
                    for (item; item < img.data.shu.length; item++) {
                        if (maxLen < 3) {
                            var HTMLElent = '<li class="shu"><img src="' + img.data.shu[item].img_thumb_url + '" img_url="' + img.data.shu[item].img_url + '" img_id="' +
                                             img.data.shu[item].img_id + '"/>';
                            $('.footer_footer .swiper-wrapper ul').eq(hengNum + i).append(HTMLElent);
                            maxLen++;
                        } else {
                            break;
                        }
                    }
                }
            }
        }
    }

    <!--点击图片显示在大框上-->
    $('.footer_footer ul img').eq(0).addClass('select');
    $(document).on("click",".footer_footer ul  img",function () {
        $('.show_cloth_content').show()
        $('.show_cloth_content').attr("style", "");
        $('.show_cloth_content').show();
        for (var i = 0; i < $('.footer_footer ul img').length; i++) {
            if ($('.rr').attr('face') == 0) {
                zhengmian.type = 0
                zhengmian.img_id = $(this).attr('img_id')
            }
            else {
                fanmian.type = 1
                fanmian.img_id = $(this).attr('img_id');
            }
            $('.footer_footer ul img').removeClass('select');
        }
        $(this).addClass('select');

        /*选中衣服的背景*/
        var imgsrc = $(this).attr('img_url');
        var imgid = $(this).attr('img_id');
        $('.show_cloth_content').attr('src', imgsrc);
        $('.show_cloth_content').attr('img_id', imgid);
    });

    $('.footer_footer ul').find("li").eq(0).find('div').eq(0).find('img').click(function() {
        $('.show_cloth_content').hide();
    });

    var zhengmian={
        type:'0' ,    //正面:0  反面:1
        cloth_color:'ffffff',
        img_id:'',
        gid:'1',
        cloth_src:'http://file.zoomyoung.cn/main/2018/6/9/9b254b6cbb190b9c4d419f223ad56563.png?t=1.6841430743557484',
        img_src:''
    }
    var fanmian={
        type:'1' ,    //正面:0  反面:1
        cloth_color:'ffffff',
        img_id:'',
        gid:'1',
        cloth_src:'http://file.zoomyoung.cn/main/2018/6/9/9b254b6cbb190b9c4d419f223ad56563.png?t=1.6841430743557484',
        img_src:''
    }
    var chuan={
        gid:'',
        face:'',
        color:'ffffff'
    }

    <!--设置展示图片的位置-->
    <!--获取屏幕的大小-->
    function getTemplateList() {
        var face=$('.rr').attr('face') || '0' ;
        var color=$('.rr').attr('color_space') || '#ffffff';
        var $msg='?gid=1&&color='+color+'&&face='+face+'';
        console.log($('.rr').attr('face'))
        $.ajax({
            url: "http://zoomyoung.cn/api/design/get-template"+$msg,
            type: 'get',
            dataType:"json",
            async:false,
            xhrFields:{
                withCredentials:true,
            },
            crossdomain:true,
            success: function (msg) {
                if(msg.level == "success"){
                    var msg_src=msg.data.img_url+'?t='+Math.random()*10;
                    $('.rr').attr("src",msg_src)
                    var img = new Image();
                    img.src = $('.rr').attr("src");
                    img.onload = function(){
                        var screnTop=$(document).height();
                        <!--获取展示图片盒子的大小-->
                        var boxTop=$('.rr').height();
                        var footeTop=$('.footer').height();
                        var liTop=(screnTop-footeTop-boxTop)/2+'px';
                        $('.zhuan').css({"top":liTop});
                        <!--设置下一步按钮的行高-->
                        $('.show_next').css({'line-height':$('.show_next').css('height')});
                        $('.show_cloth_content').attr('src',zhengmian.tuan_url);
                        //$('.rr').attr('face',zhengmian.type);
                    }
                }else {
                    //TODO 失败处理
                }
            },
            error:function(){
                console.log('styleSteam  error')
            }
        });
    }
    <!--点击按钮，旋转衣服正反面-->
    var tag=1;   //0正面   1反面
    $('.show_zhuan').click(function() {
        tag++;
        if (tag > 1) {
            tag = 0
        }
        qiehuan(tag)
    });
    var t=$('.show_cloth_content')
    var rr=$('.rr')
    function qiehuan(tag) {
        if (tag == 0) {
            chuan.gid = '1';     //商品类型
            chuan.face = '1';
            var $a = "?gid=" + chuan.gid + "&&face=" + chuan.face + "&&color=" + chuan.color
            var data = $.doGetDataAjax('http://zoomyoung.cn/api/design/get-template', "json", false, $a);
            fanmian.cloth_src = data.data.img_url;
            rr.attr('face', '1')
            zhengmian.cloth_color = rr.attr('color_space');
            zhengmian.img_src = t.attr('src');
            if (fanmian.img_src == undefined || fanmian.img_src === "") {
                t.attr('src', "")
                t.hide();
            }
            else {
                t.show();
                t.attr('src', fanmian.img_src);
            }
        }
        else {
            chuan.gid = '1';     //商品类型
            chuan.face = '0';
            var $a = "?gid=" + chuan.gid + "&&face=" + chuan.face + "&&color=" + chuan.color
            var data = $.doGetDataAjax('http://zoomyoung.cn/api/design/get-template', "json", false, $a);
            zhengmian.cloth_src = data.data.img_url;
            fanmian.cloth_color = rr.attr('color_space');
            fanmian.img_src = t.attr('src');
            rr.attr('face', '0')
            if (zhengmian.img_src == undefined || zhengmian.img_src == "") {
                t.attr('src', "")
                t.hide();
            }
            else {
                t.show();
                t.attr('src', zhengmian.img_src);
            }
        }
        rotateY(zhengmian.cloth_src, fanmian.cloth_src);
    }

    <!--正反面切换-->
    var y,ny=0,rotYINT;
    function rotateY(zheng,fan) {
        clearInterval(rotYINT)
        rotYINT = setInterval(function(){
            ny = ny + 10;
            rr.css("transform", "rotateY(" + ny + "deg)");
                t.css("transform", "rotateY(" + ny + "deg)");
            if (ny == 90) {
              rr.attr('src', fan)
            }
            if (ny == 270) {
              rr.attr('src', zheng)
            }
            if (ny == 180 || ny >= 360) {
              $('.show_cloth_content').css("transform", "rotateY(0deg)");
              clearInterval(rotYINT)
            if (ny >= 360) {
              ny = 0;
            }
            }
        }, 10);
    }  
   
    /*点击下一步 页面跳转*/
    $('.show_next').click(function(){
        $('body').mLoading({
            text:"生成T恤中...",
            icon:'./img/loading.gif',
            mask:true
        });

        if(zhengmian.img_id=="")
        {
            zhengmian.img_id=0;
        }
        if(fanmian.img_id=="")
        {
            fanmian.img_id=0;
        }
        var dataJson={
            color:chuan.color,
            gid:'1',
            material_up_id:zhengmian.img_id,
            material_down_id:fanmian.img_id
        };

//        var data= $.doPostDataAjax('http://zoomyoung.cn/api/design/build-new',"json",false,dataJson);

        $.ajax({
            url: "http://zoomyoung.cn/api/design/build-new",
            type: 'post',
            data: dataJson,
            dataType:"json",
            async:true,
            xhrFields:{              //跨域设置
                withCredentials:true, //跨域设置
            },
            crossdomain:true,         //跨域设置

            success: function (data) {
                if(data.level==="success")
                {
                    $('body').mLoading('hide');
                    window.location.href="./show.html?type="+data.data;
                }
            },
            error:function(){
                console.log('styleSteam  error');
            }
        });
    });

    /*刚加载时获取衣服颜色的小图案*/
    smallCloth($('.selectColor ul'));
    function smallCloth(dom) {
        var dom = dom;
//             var data = $.doGetDataAjax('http://zoomyoung.cn/api/design/get-color-list', "json", false, "");
        $.ajax({
            url: "http://zoomyoung.cn/api/design/get-color-list",
            type: 'get',
            dataType:"json",
            async:false,
            xhrFields:{
                withCredentials:true,
            },
            crossdomain:true,
            success: function (data) {
                if (data.level != "success") {
                    console.log(data.message);
                }
                for (var i = 0; i < data.data.length; i++) {
                    dom.append(" <li><img src='" + data.data[i].color_img_url + "' color_space='" + data.data[i].color_space + "'/></li>");
                }
                dom.append('<li class="colorSet"><img src="img/cloth/small/setBtn.png"/></li>  ');
            },
            error:function(){
                console.log('styleSteam  error')
            }
        });
    }


    /*替换衣服颜色*/
    var selectColorLi=$('.selectColor ul li')
    selectColorLi.click(function() {
        chuan.gid = '1';     //商品类型
        chuan.face = $('.rr').attr('face');
        chuan.color = $(this).find('img').attr('color_space');
        var $a = "?gid=" + chuan.gid + "&&face=" + chuan.face + "&&color=" + chuan.color;
//             var data = $.doGetDataAjax('http://zoomyoung.cn/api/design/get-template', "json", false, $a);
        $.ajax({
            url: "http://zoomyoung.cn/api/design/get-template"+$a,
            type: 'get',
            dataType:"json",
            async:false,
            xhrFields:{
                withCredentials:true,
            },
            crossdomain:true,
            success: function (data) {
                $('.rr').attr('src', data.data.img_url);
                $('.rr').attr('color_space', data.data.color_space);
                if (chuan.face == 0) {
                    zhengmian.cloth_src = data.data.img_url;
                    zhengmian.cloth_color = data.data.color_space
                    console.log(zhengmian)
                } else {
                    fanmian.cloth_src = data.data.img_url;
                    fanmian.cloth_color = data.data.color_space
                    console.log(fanmian)
                }
            },
            error:function(){
                console.log('styleSteam  error')
            }
        });
    });

    /*取消点击按钮的点击事件*/
    $('.selectColor ul li:last').off('click')
    /*绑定点击按钮的点击事件*/
    var selectColor=$('.selectColor')
    function hideColor() {
        selectColor.animate({'height': '0'}, function () {
            selectColor.hide();
        })
    }

    function showColor() {
        console.log('a')
        selectColor.show();
        var height1 = 0;
        for (var i = 0; i < selectColorLi.length; i++) {
            height1 += selectColorLi.eq(i).height();
        }
        var height = height1 - 7 + "px"
        selectColor.animate({'height': height})
    }

    $('.show_zhuan').click(function(){
        hideColor();
    });

    $('.zhuan').click(function(){
        hideColor();
    });

    $('.footer').click(function(){
        hideColor();
    });

    $('.colorSet').click(function(){
        hideColor();
    });

    $('.showColor').click(function(){
        showColor();
        return false
    });

});
</script>
</body>
</html>